<layout name='layout_page' />
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/timeline.css" type="text/css"/>

<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>Training plan</span></li>
				</ol>
				<h1>Training plan</h1>
			</div>
		</div>


		<div class="row">
			<div class="col-lg-4">
				<div class="main-box no-header clearfix">
					<div class="main-box-body clearfix">
						<form id="ajaxForm" action="<{:U('Plan/update')}>" method="post" class="form-horizontal form-validata">
							<div class="form-group menteesBase">
								<img src="<{$mentees['face']|getFace=###}>">
								<p><{$mentees['nickname']}><br/><span class="label label-primary"><{$train['trainItem']}></span></p>
							</div>	

							<div class="form-group">
								<label>Title</label>
								<input type="text" class="form-control" id="title" name="title" value="<{$plan['title']}>" placeholder="Enter title" data-rule-required="true">
							</div>	

							<div class="form-group">
								<label>Start time</label>								
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" id="startTime" name="startTime" value="<{$plan['startTime']|date="m/d/Y",###}>" placeholder="Enter start time" data-rule-required="true">
								</div>
							</div>

							<div class="form-group">
								<label>End time</label>
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" id="endTime" name="endTime" value="<{$plan['endTime']|date="m/d/Y",###}>" placeholder="Enter end time" data-rule-required="true">
								</div>								
							</div>		

							<script> 
							$(function(){
								$("#startTime" ).datepicker({
									minDate: new Date()
								});
								$("#endTime" ).datepicker({
									minDate: new Date()
								});
							});
							</script>

							<div class="form-group">
								<label for="exampleTextarea">Descriptions</label>
								<textarea class="form-control" name="content" id="content" rows="5" data-rule-required="true"><{$plan['content']}></textarea>
							</div>	

							<div class="form-group">				
								<button type="submit" id="myBtn" class="btn btn-success">Edit Plan</button>	
							</div>
							<input type="hidden" name="trainID" value="<{$plan['trainID']}>">
							<input type="hidden" name="id" value="<{$plan['id']}>">
						</form>
					</div>
				</div>
			</div>

			<div class="col-lg-8">
				<section id="cd-timeline" class="cd-container">
					<volist name="list" id="vo">
					<div class="cd-timeline-block">
						<div class="cd-timeline-img cd-picture"> <i class="fa fa-clock-o fa-2x"></i> </div>
						<div class="cd-timeline-content">
							<h2><{$vo.title}></h2>
							<p><{$vo.content}></p>
							<notempty name="vo.comment">
							<p class="timeComment"><{$vo.comment}></p>
							</notempty>
							<div class="clearfix">
								<a href="javascript:void(0)" onclick="openWindow('Edit Node','<{:U('Plan/editnode',array('id'=>$vo['id']))}>')">
									<span class="fa-stack">
									<i class="fa fa-square fa-stack-2x"></i>
									<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
									</span>
								</a>
								<a href="javascript:void(0)" onclick="openWindow('Comment','<{:U('Plan/commentnode',array('id'=>$vo['id']))}>',600,250)">
									<span class="fa-stack">
									<i class="fa fa-square fa-stack-2x"></i>
									<i class="fa fa-comment-o fa-stack-1x fa-inverse"></i>
									</span>
								</a>
								<a href="<{:U('Plan/delnode',array('id'=>$vo['id']))}>" onClick="if(!confirm('Cannot be recovered after deletion!'))return false;" class="timeDanger">
									<span class="fa-stack">
									<i class="fa fa-square fa-stack-2x"></i>
									<i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
									</span>
								</a>
							</div>
							<span class="cd-date"><{$vo.startTime|date="m/d/Y",###}> - <{$vo.endTime|date="m/d/Y",###}></span>
						</div>
					</div>					
					</volist>
				</section>

			</div>
		</div>
	</div>
</div>